import React, {Component} from 'react';

import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  Image,
  Linking,
  SafeAreaView,
  Dimensions,
  ImageBackground,
} from 'react-native';

import ApplyList from './ApplyList/index';

import {getStoreList} from 'api/index';

import {ApplicationImg} from '../../images/index';

import Swiper from 'react-native-swiper';

import {AndroidWhiteBar} from 'components/index';
import {CommonImg} from '../../images';
import {BackgroundPicture} from '../../components';
import Background from './Background';

let widthScreen = Dimensions.get('window').width;
let heightScreen = Dimensions.get('window').height;

export default class Application extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: [],
      tab: 'tab1',
      filter: '',
    };
  }

  componentDidMount() {
    this._getStoreList('newest');
  }

  async _getStoreList(filter) {
    try {
      const result = await getStoreList(filter);

      this.setState({
        list: result.data,
      });
    } catch (e) {}
  }

  _mapApplyList() {
    return this.state.list.map((item, id) => (
      <View
        style={{
          width: widthScreen * 0.95,
          height: heightScreen * 0.22,
          marginLeft: widthScreen * 0.025,
          marginTop: heightScreen * 0.02,
        }}>
        <Background
          title={item.title}
          appid={item.appid}
          img={item.logo}
          navigation={this.props.navigation}
          desc={item.desc}
          index={id}
        />
      </View>
    ));
  }

  tabChoose(tab) {
    if (tab === 'tab1') {
      this.setState({
        tab: 'tab1',
      });
      this._getStoreList('newest');
    } else if (tab === 'tab2') {
      this.setState({
        tab: 'tab2',
      });
      this._getStoreList('inlife');
    } else {
      this.setState({
        tab: 'tab3',
      });
      this._getStoreList('indisease');
    }
  }

  open(url) {
    Linking.openURL(url);
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <AndroidWhiteBar />
        <ScrollView showsVerticalScrollIndicator={false}>
          <View>
            <Swiper
              height={160}
              dot={<View style={styles.dot} />}
              activeDot={<View style={styles.activeDot} />}
              paginationStyle={styles.pagination}
              autoplay={true}
              autoplayTimeout={2}>
              <TouchableOpacity
                activeOpacity={0.8}
                onPress={() =>
                  Linking.openURL('https://bihu.com/article/1789710369')
                }>
                <Image
                  source={ApplicationImg.Banner2}
                  style={styles.bannerImg}
                />
              </TouchableOpacity>
              <TouchableOpacity
                activeOpacity={0.8}
                onPress={() =>
                  this.open('https://mp.weixin.qq.com/s/3_-JneHlr_6GT6Mx4ORm-Q')
                }>
                <Image
                  source={ApplicationImg.Banner1}
                  style={styles.bannerImg}
                />
              </TouchableOpacity>
              <TouchableOpacity
                activeOpacity={0.8}
                onPress={() =>
                  this.open('https://mp.weixin.qq.com/s/s4yLtLNj147zWh28y59xBw')
                }>
                <Image
                  source={ApplicationImg.Banner3}
                  style={styles.bannerImg}
                />
              </TouchableOpacity>
            </Swiper>
          </View>

          <View style={styles.box2}>
            <TouchableOpacity
              style={styles.box22box2}
              activeOpacity={0.8}
              onPress={() => {
                this.props.navigation.navigate('ApplyPage', {
                  title: '所有应用',
                  filter: 'all',
                });
              }}>
              <Image
                source={ApplicationImg.AllApplication}
                style={styles.box2Img}
                resizeMode="cover"
              />
              <Text>所有应用</Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.8}
              style={styles.box2Box2}
              onPress={() => {
                this.props.navigation.navigate('ApplyPage', {
                  title: '已购应用',
                  filter: 'hasbuy',
                });
              }}>
              <Image
                source={ApplicationImg.AlreadyBoughtApplication}
                style={styles.box2Img}
                resizeMode="cover"
              />
              <Text>已购应用</Text>
            </TouchableOpacity>
            {/*<TouchableOpacity*/}
            {/*  activeOpacity={0.8}*/}
            {/*  onPress={() => Linking.openURL('http://qr07.cn/FU9IVG')}>*/}
            {/*  <Image*/}
            {/*    source={ApplicationImg.GetData}*/}
            {/*    style={styles.box2Img}*/}
            {/*    resizeMode="cover"*/}
            {/*  />*/}
            {/*  <Text>获取数据</Text>*/}
            {/*</TouchableOpacity>*/}
          </View>
          <View
            style={{height: heightScreen * 0.0169, backgroundColor: '#F3F7FA'}}
          />
          <View
            style={{
              width: widthScreen,
              flexDirection: 'row',
              marginTop: heightScreen * 0.03,
              justifyContent: 'space-between',
            }}>
            <View style={{flexDirection: 'row'}}>
              <View style={styles1.bluepointStyle} />
              <Text style={styles1.subtitleStyle}>基因测序大礼包</Text>
            </View>
          </View>
          <View>
            <TouchableOpacity
              onPress={() =>
                this.open(
                  'https://shop14945037.m.youzan.com/v2/showcase/homepage?alias=i58fd2xq',
                )
              }
              style={{
                width: widthScreen * 0.9,
                height: heightScreen * 0.22,
                backgroundColor: '#ffffff',
                marginLeft: widthScreen * 0.05,
                marginTop: heightScreen * 0.01,
              }}>
              <Image
                source={ApplicationImg.giftBackground}
                style={{
                  width: widthScreen * 0.9,
                  height: heightScreen * 0.15,
                  resizeMode: 'stretch',
                  marginTop: heightScreen * 0.005,
                  marginLeft: widthScreen * 0.03,
                }}
              />
              <Text
                style={{
                  ...styles1.black20,
                  marginLeft: 0,
                  marginTop: -heightScreen * 0.13,
                }}>
                WeGene检测标准版2.0
              </Text>
              <Text
                style={{
                  ...styles1.gray20,
                  marginLeft: 0,
                  width: widthScreen * 0.75,
                }}>
                只需1ml唾液，您可以轻松在家获取个人基因检测报告，包含祖源、运动、营养、美肤、测报告，包含祖源、运动、营养、美肤测报告
              </Text>
            </TouchableOpacity>
          </View>
          <View
            style={{height: heightScreen * 0.0169, backgroundColor: '#F3F7FA'}}
          />
          <View
            style={{
              width: widthScreen,
              flexDirection: 'row',
              marginTop: heightScreen * 0.03,
              justifyContent: 'space-between',
            }}>
            <View style={{flexDirection: 'row'}}>
              <View style={styles1.bluepointStyle} />
              <Text style={styles1.subtitleStyle}>最新上架应用</Text>
            </View>
          </View>

          {this._mapApplyList()}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  pagination: {
    bottom: 10,
  },
  dot: {
    width: 7,
    height: 7,
    borderRadius: 7,
    backgroundColor: '#D6D6D6',
    marginLeft: 3,
    marginRight: 3,
  },
  activeDot: {
    width: 7,
    height: 7,
    borderRadius: 7,
    backgroundColor: '#31A4F4',
  },
  box2: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    padding: 20,
  },
  box2Img: {
    marginBottom: 15,
  },
  box2Box2: {
    marginLeft: 120,
    marginRight: 80,
  },
  box22box2: {
    marginLeft: 50,
  },
  box3: {
    //padding: 20,
    backgroundColor: '#F8FCFF',
  },
  tabBox: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 0.5,
    borderStyle: 'solid',
    borderColor: '#D6D6D6',
  },
  tab: {
    marginRight: 17,
    paddingBottom: 5,
  },
  choose: {
    borderBottomWidth: 0.5,
    borderStyle: 'solid',
    borderColor: '#979797',
  },
  tabText: {
    fontSize: 16,
    color: '#333',
  },
});

const iconStyles = StyleSheet.create({
  forward: {
    width: heightScreen * 0.0123,
    height: heightScreen * 0.0215,
    marginRight: heightScreen * 0.03,
    marginTop: heightScreen * 0.005,
  },
});
const styles1 = StyleSheet.create({
  containerStyle: {
    width: widthScreen,
    height: heightScreen,
    backgroundColor: '#F3F7FA',
  },
  titleViewStyle: {
    backgroundColor: '#FFFFFF',
    height: 58,
  },
  titleTextStyle: {
    textAlign: 'center',
    width: widthScreen,
    top: 20,
    fontWeight: 'bold',
    //fontFamily: 'MicrosoftYaHei',
    fontSize: 14,
  },
  scrollStyle: {
    backgroundColor: '#F3F7FA',
  },
  abortHGBCStyle: {
    width: widthScreen,
    height: 300,
    backgroundColor: '#FFFFFF',
    marginTop: 10,
    alignItems: 'center',
  },
  peopleListRowStyle: {
    width: widthScreen,
    height: 199.5,
    backgroundColor: '#FFFFFF',
    marginTop: 12,
    justifyContent: 'space-between',
  },
  lankStyle: {
    width: widthScreen,
    height: 300,
    backgroundColor: '#FFFFFF',
    marginTop: 12,
  },
  bluepointStyle: {
    marginTop: heightScreen * 0.004,
    width: widthScreen * 0.013,
    height: heightScreen * 0.024,
    marginLeft: heightScreen * 0.03,
    backgroundColor: '#2672C0',
  },
  subtitleStyle: {
    color: '#333333',
    marginLeft: heightScreen * 0.008,
    fontWeight: 'bold',
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.022,
  },
  squarePeopleStyle: {
    width: 70,
    height: 75,
    backgroundColor: '#E5E5E5',
    borderRadius: 5,
  },
  peopleNameStyle: {
    width: 70,
    textAlign: 'center',
    marginTop: 12,
    fontWeight: 'bold',
    //fontFamily: 'MicrosoftYaHei',
    color: '#656565',
    fontSize: 13,
  },
  moreStyle: {
    //width: 295,
    textAlign: 'right',
    marginTop: 4,
    marginRight: 20,
    //fontFamily: 'MicrosoftYaHei',
    color: '#989898',
    fontSize: 12,
  },
  white18: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.02,
    color: '#FFFFFF',
  },
  white22: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.022,
    color: '#FFFFFF',
  },
  white30: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.03,
    color: '#FFFFFF',
  },
  black20: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.021,
    color: '#333333',
    marginLeft: heightScreen * 0.027,
  },
  orange20: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.021,
    color: '#FE7241',
  },
  gray15: {
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.015,
    marginTop: heightScreen * 0.007,
    color: '#989898',
  },
  gray20: {
    marginTop: heightScreen * 0.014,
    marginLeft: heightScreen * 0.027,
    //fontFamily: 'MicrosoftYaHei',
    fontSize: heightScreen * 0.02,
    color: '#989898',
  },
});
const lineStyle = StyleSheet.create({
  Middle: {
    width: widthScreen * 0.667,
    height: 0.5,
    backgroundColor: '#DCDCDC',
  },
  Middle2: {
    width: widthScreen * 0.792,
    height: 0.5,
    backgroundColor: '#DCDCDC',
  },
  Long: {
    width: widthScreen * 0.84,
    height: 0.5,
    backgroundColor: '#DCDCDC',
  },
  longest: {
    width: widthScreen,
    height: 0.5,
    backgroundColor: '#DCDCDC',
  },
});
